<template>
  <div class="comments">
    <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="list.length === 0 ? '暂无评论' : '没有更多了'"
        @load="moreLoad"
    >
      <!-- <van-cell
        v-for="(components, index) in list"
        :key="index"
        :title="components.slclsj"
      /> -->
      <!-- 评论 -->
      <!--      <van-cell :border="false" ref="ss" v-if="list.length">全部评论</van-cell>-->
      <CommentItem
          v-for="(comment, index) in list"
          :key="index"
          :userId="userId"
          :title="comment.content"
          :comment="comment"
          @reply-click="$emit('reply-click', $event)"
          @del-comment="$emit('del-comment',$event)"
      ></CommentItem>
      <!-- /评论 -->
    </van-list>
  </div>
</template>

<script>
// 加载封装的aixos接口方法
// import { getCommentsAPI } from '@/api'
// 引入组件
import CommentItem from './comment-item'
import {commentList} from '@/api/share.js'
import {mapState} from 'vuex';

export default {
  // 组件名
  name: 'commentsList',
  // 注册组件
  components: {CommentItem},
  // 定义props
  props: {
    // 如果获取文章评论,则传递文章 ID
    // 如果获取评论回复,则传递评论 ID
    source: {
      type: [Number, String, Object],
      required: true
    },
    // 获取文章评论，使用字符 a
    // 获取评论回复，使用字符 b
    type: {
      type: String,
      default: 'a'
    },
    userId: {
      type: String,
      default: null
    },
    // list: {
    //   type: Array,
    //   // 数组或对象的默认值必须通过函数返回
    //   // default: function () {
    //   //   return []
    //   // }
    //   default: () => []
    // }
  },
  // 定义变量
  data() {
    return {
      list: [], // 评论数据列表
      loading: false, // 控制加载中的 loading 状态
      finished: false, // 控制加载结束的状态，当加载结束，不再触发加载更多
      current: 1, // 获取下一页数据的页码
      size: 10 // 每页数据量
    }
  },
  // 生命周期函数
  created() {
    console.log('commit-list', this.videoItem)
  },
  // 定义计算属性
  computed: {
    ...mapState('share', ['videoItem']),
  },
  watch: {
    'list.id': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.onLoad()
          console.log('监听到新的list刷新请求')
        }
      }
    }
  },
  // 定义方法函数
  methods: {
    init() {
      this.list = [];
      this.loading = false;
      this.finished = false;
      this.current = 1; // 获取下一页数据的页码
      this.size = 10;
      this.onLoad();
    },
    moreLoad() {
      // 4. 判断是否还有数据
      // if (records.length > 0) {
      // 如果有，更新获取下一页数据的页码
      this.current += 1// 下一页数据
      this.onLoad()
      // } else {
      //   // 如果没有，则将 finished 设置为ture，不再触发加载更多了
      //   this.finished = true
      // }
    },
    // 获取评论
    async onLoad() {
      this.loading = true
      console.log('onLoad', this.source)
      // 1. 请求获取数据
      //获取评论列表
      // let data = {
      //   id: this.source
      // }
      // await this.$store.dispatch('share/getCommentList', data)
      const {data} = await commentList({
        id: this.source,
        current: this.current, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
        size: this.size // 获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
      })
      console.log(data.records)
      // 获取评论的数量
      // this.$emit('update-total-count', data.data.total_count) //评论length
      // 2. 把数据放到列表中
      const {records} = data
      this.list.push(...records)
      this.$store.commit('share/SET_COMMENT_LIST', this.list)
      // 3. 将本次的 loading 关闭
      this.loading = false
      console.log('长度', records.length)
      if (records.length <= 0) {
        // 如果有，更新获取下一页数据的页码
        // this.current += 1// 下一页数据
        // this.onLoad()
        // } else {
        //   // 如果没有，则将 finished 设置为ture，不再触发加载更多了
        this.finished = true
      }
    }
  },

}
</script>
<style>
</style>
